<template>
  <div :class="{'detail': true}">
    <div class="top" @click="handle">
      <span><span class="textOne">{{$t('cImport.iState')}}:</span> <span class="text">{{transObj.status}}</span></span>
      <span><span class="textOne">{{$t('cArroval.aog')}}:</span> <span style="color:red" v-if="transObj.aog === 'AOG'" class="text">AOG</span><span v-else>{{$t('m.mNo')}} AOG</span></span>
    </div>
    <div class="center">
      <span style="position: relative" @click="handleOpen">
        <span class="textOne">{{$t('cImport.iContract')}}: </span>
        <van-icon :name="open ? 'arrow-down':'arrow'" class="down" v-if="contractNew.length !== 0"/>
        <span class="open">
          <span v-if="transObj.contractNoList && transObj.contractNoList[0].contractNo">{{transObj.contractNoList[0].contractNo}}</span>
          <span class="open-text" v-if="open">
            <span v-for="(item,index) in contractNew" :key="index">{{item.contractNo}}</span>
          </span>
        </span>
      </span>
      <span @click="handle"><span class="textOne">{{$t('cExport.port')}}:</span> <span class="text">{{transObj.destinationHarbor}}</span></span>
    </div>
    <div class="bottom" @click="handle">
      <span class="state"><span class="textOne">{{$t('cExport.mainWaybillNumber')}}:</span> <span>{{transObj.mainWaybillNumber}}</span></span>
      <span class="state"><span class="textOne">{{$t('cExport.shipping')}}:</span> <span>{{transObj.waybillNumber}}</span></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    transObj: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      open: false,
      contractNew: []
    }
  },
  methods: {
    handleOpen() {
      this.open = !this.open
      this.$emit('handleOpne')
    },
    handle() {
      this.$emit('open')
    }
  },
  mounted() {
    if (this.transObj.contractNoList) this.contractNew = this.transObj.contractNoList.slice(1)
  }
}
</script>

<style scoped>
.detail {
  margin: 2.778vw;
  padding: 1.389vw;
  border: 1px solid rgba(0, 0, 0, .3);
  font-size: 3.889vw;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 5px 5px -1px rgba(0, 0, 255, .1);
  opacity: 1;
}
.top,.center,.bottom div {
  display: flex;
}
.bottom div span {
  flex: 1;
}
.text {
  font-weight: 500;
}
.top,.center,.bottom {
  display: flex;
}
.top span:nth-child(1) {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.top span:nth-child(2) {
  flex: 1;
}
.center span:nth-child(1) {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.center span:nth-child(2) {
  flex: 1;
}
.bottom span:nth-child(1) {
  flex: 1;
}
.bottom span:nth-child(2) {
  flex: 1;
}
.textOne {
  font-weight: bold;
}
/* 扩展 */
.open {
  position: relative;
  width: 100%;
}
.down {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}
.open-text {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46%;
  flex-direction: column;
  left: 29%;
}
</style>
